<template>
  <div style="height: 450px">
    <el-row>
      <el-col :span="24">
        <div style="display: flex; align-items: center">
          <div
            v-for="(item, index) in typeList"
            :key="index"
            style="
              margin-right: 5px;
              display: flex;
              align-items: center;
              font-weight: 400;
              font-size: 14px;
            "
          >
            <div
              style="
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 2px;
              "
              :style="{ background: item.color }"
            />
            <div>{{ item.label }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <RelationGraph
      v-if="userId"
      ref="seeksRelationGraph"
      :options="graphOptions"
      :on-node-click="onNodeClick"
      :on-line-click="onLineClick"
    />
  </div>
</template>

<script>
import RelationGraph from "relation-graph";
import { getUserRelation } from "@/api/user/common";
export default {
  name: "UserRelation",
  components: { RelationGraph },
  props: {
    userId: {
      type: String,
    },
  },
  data() {
    return {
      typeList: [
        { label: "吸毒人员", color: "#000080" },
        { label: "工作人员", color: "black" },
        { label: "家庭成员", color: "#E6A23C" },
        { label: "社会关系", color: "#9400D3" },
        { label: "帮扶成员", color: "#67C23A" },
      ],
      graphOptions: {
        allowShowMiniToolBar: false,
        allowSwitchLineShape: true,
        allowSwitchJunctionPoint: true,
        defaultJunctionPoint: "border",
        // 这里可以参考"Graph 图谱"中的参数进行设置
      },
    };
  },
  watch: {
    userId: {
      handler() {
        this.showSeeksGraph();
      },
    },
  },
  mounted() {
    this.showSeeksGraph();
  },
  methods: {
    refresh() {
      this.showSeeksGraph();
    },
    showSeeksGraph() {
      getUserRelation(this.userId).then((res) => {
        this.$refs.seeksRelationGraph.setJsonData(
          res.data,
          (seeksRGGraph) => {}
        );
      });
    },
    onNodeClick(nodeObject, $event) {
      console.log("onNodeClick:", nodeObject);
    },
    onLineClick(lineObject, $event) {
      console.log("onLineClick:", lineObject);
    },
  },
};
</script>

<style scoped></style>
